<template>
  <div class="message-app">
    <h2 style="background-color:#cccccc;text-align: center">消息</h2>
    <div class="message">
      <div class="message-item" v-for="item in messageList" :key="item.id">
        <img :src="item.img">
        <h3>{{item.name}}</h3>
        <h4>{{item.newMessage}}</h4>
        <h5>{{item.time}}</h5>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="">
import {ref,onMounted} from "vue"
import dateformat from "@/hooks/dateformat.ts"
import {messageListStore} from "@/store/messageListStore.ts";
let messageList =ref(messageListStore().messageList)
onMounted(() => {
  messageList.value.forEach((item) => {
    item.time = dateformat(item.time)
  })
})
</script>

<style scoped>
.message-item{
  width: 100%;
  height: 70px;
  box-shadow: 0 0 2px #00091c;
}
img{
  width: 60px;
  height: 60px;
  border-radius: 35px;
  margin-left: 10px;
  margin-top: 5px;
}
h3{
  color: #000000;
  margin-left: 90px;
  margin-top: -67px;
  font-weight: bold;
}
h4{
  margin-left: 90px;
  margin-top: 5px;
  color: rgba(0, 0, 0, 0.7);
  white-space: nowrap;      /* 禁止换行 */
  overflow: hidden;         /* 超出部分隐藏 */
  text-overflow: ellipsis;  /* 超出部分显示省略号 */
  max-width: 22ch;           /* 限制最大宽度为5个字符 */
}
h5{
  margin-left: 310px;
  margin-top: -40px;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.7);
}
</style>